@require 'variables'

.page-wrapper {
    position: absolute
    overflow-y: auto
    left: $sidebar-width + 15px
    right: 0
    top: 0
    bottom: 0
    box-sizing: border-box
    -webkit-overflow-scrolling: touch

    min-height: 100%

    // Animation: slide away
    transition: left 0.5s

    @media only screen and (max-width: 1060px) {
        left: 15px;
        padding-right: 15px;
    }
}

.sidebar-hidden .page-wrapper {
    left: 15px
}

.sidebar-visible .page-wrapper {
    left: $sidebar-width + 15px
}

.page {
    position: absolute
    top: 0
    right: 0
    left: 0
    bottom: 0

    padding-right: 15px
    overflow-y: auto
}

.content {
    margin-left: auto
    margin-right:auto
    max-width: 750px
    padding-bottom: 50px

    a {
        text-decoration: none;
        &:hover { text-decoration: underline; }
    }

    img { max-width: 100%; }
}
